<template>
	<div ref="yieldTrendChart" v-resize="resizeChart" style="width: 100%;height: 100%;"></div>
</template>

<script>
    const borderColor = '#2b5790';
    const color = '#808695';
    const legendTextStyle = '#808695';
    import * as echarts from 'echarts';
    import domResize from '../../../../mixins/dom-resize';
    import { formatMonthDate } from '../../../../utils/jk/jk-tool';
    export default {
        name: 'YieldTrendChart',
        props: {
            chartData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [domResize],
        data() {
            return {
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    title: {
                        text: '',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: '20%',
                        right: '5%',
                        bottom: '4%',
                        left: '20px',
                        containLabel: true
                    },
                    legend: {
                        data: ['报工产量', '称重产量'],
                        textStyle: {
                            color: legendTextStyle
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            show: true,
                            color: color

                        },
                        nameTextStyle: {
                            color: 'red'
                        },
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                lineStyle: {
                                    color: 'none'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: color

                            },
                            axisLine: {
                                lineStyle: {
                                    color: borderColor
                                }
                            }
                        }
                    ],
                    series: [
                        /* {
                            name: '报工产量',
                            type: 'bar',
                            data: [],
                            smooth: false,
                            barGap: 0,
                            symbol: 'none',
                            yAxisIndex: 0,
                            itemStyle: {
                                color: '#2378f7'
                            },
                            label: {
                                show: true,
                                position: 'outside'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#188df0'
                                    },
                                    {
                                        offset: 1,
                                        color: '#2378f7'
                                    }
                                ])
                            }
                        },
                        {
                            name: '称重产量',
                            type: 'bar',
                            data: [],
                            smooth: false,
                            yAxisIndex: 0,
                            barGap: 0,
                            symbol: 'none',
                            itemStyle: {
                                color: '#19be6b'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#19be6b'
                                    },
                                    {
                                        offset: 1,
                                        color: '#19be6b'
                                    }
                                ])
                            }
                        }*/
                    ]
                },
                reportOption: {
                    name: '报工产量',
                    type: 'bar',
                    data: [],
                    smooth: false,
                    barGap: 0,
                    symbol: 'none',
                    yAxisIndex: 0,
                    itemStyle: {
                        color: '#2378f7'
                    },
                    label: {
                        show: false,
                        position: 'outside'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#188df0'
                            },
                            {
                                offset: 1,
                                color: '#2378f7'
                            }
                        ])
                    }
                },
                weighOption: {
                    name: '称重产量',
                    type: 'bar',
                    data: [],
                    smooth: false,
                    yAxisIndex: 0,
                    barGap: 0,
                    symbol: 'none',
                    itemStyle: {
                        color: '#19be6b'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#19be6b'
                            },
                            {
                                offset: 1,
                                color: '#19be6b'
                            }
                        ])
                    }
                }

            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.yieldTrendChart);
                    this.example.setOption(this.option);
                    this.updateChart();
                });
            },
            formatD(e) {
                const d = new Date(e);
                const m = d.getMonth() + 1;
                const date = d.getDate();
                return `${m}/${date}`;
            },
            updateChart() {
                if (this.example) {
                    this.$nextTick(() => {
                        const cpData = this.chartData && this.chartData.dataList ? JSON.parse(JSON.stringify(this.chartData)).dataList : [];
                        this.option.title.text = this.chartData.processName;

                        this.option.xAxis.data = cpData.map(x => this.formatD(x.belongDate));
                        // 只有粗、细展示称重产量
                        if (['XS', 'CS'].includes(this.chartData.processCode)) {
                            this.option.legend.data = ['报工产量', '称重产量'];
                            this.option.series = [
                                JSON.parse(JSON.stringify(this.reportOption)),
                                JSON.parse(JSON.stringify(this.weighOption))
                            ];
                            this.option.series[0].data = cpData.map(x => x.reportOutputKg);
                            this.option.series[1].data = cpData.map(x => x.weighNetWeight);
                        } else {
                            this.option.legend.data = ['报工产量'];
                            this.option.series = [
                                JSON.parse(JSON.stringify(this.reportOption))
                            ];
                            this.option.series[0].data = cpData.map(x => x.reportOutputKg);
                        }

                        this.example.setOption(this.option);
                    });
                } else {
                    this.initChart();
                }
            }
        },
        mounted() {
            this.resize();
            this.initChart();
        },
        watch: {
            chartData: {
                handler() {
                    this.updateChart();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss"></style>
